<template>
    <div class="container" v-loading= "isLoading">
        <el-card class="today-wrap" shadow="never">
            <div slot="header">今日统计</div>
            <el-row>
                <el-col class="todayItem" :span="6">
                    <!-- <i class="el-icon-share"></i> -->
                    <img src="@/assets/vehicle/navVehicle_total.png" alt="">
                    <div class="todayItem_cont">
                    <div>道闸事件总数（车次）</div>
                    <span>{{carCount.total}}</span>
                    </div>
                </el-col>
                <el-col class="todayItem" :span="6">
                    <!-- <i class="el-icon-share"></i> -->
                    <img src="@/assets/vehicle/navVehicle_enter.png" alt="">
                    <div class="todayItem_cont">
                    <div>进入（车次）</div>
                    <span>{{carCount.in}}</span>
                    </div>
                </el-col>
                <el-col class="todayItem" :span="6">
                    <!-- <i class="el-icon-share"></i> -->
                    <img src="@/assets/vehicle/navVehicle_out.png" alt="">
                    <div class="todayItem_cont">
                    <div>驶出（车次）</div>
                    <span>{{carCount.out}}</span>
                    </div>
                </el-col>
                <el-col class="todayItem" :span="6">
                    <!-- <i class="el-icon-share"></i> -->
                    <img src="@/assets/vehicle/navVehicle_unknown.png" alt="">
                    <div class="todayItem_cont">
                    <div>陌生访客 （车次）</div>
                    <span>{{carCount.temporary}}</span>
                    </div>
                </el-col>
            </el-row>
        </el-card>
        <el-row :gutter="20">
            <el-col :span="16">
              <!-- 道闸事件 -->
                <el-card shadow="never">
                    <div slot="header" class="record-header"><el-button type="primary" plain @click="historyBtn">历史记录</el-button></div>
                    <el-table :data="tableData" border style="width: 100%">
                        <el-table-column type="index" label="序号" width="80"></el-table-column>
                        <el-table-column prop="car_category" label="车辆类型" width="180"></el-table-column>
                        <el-table-column prop="car_no" label="车牌" width="180"></el-table-column>
                        <el-table-column prop="time" label="发生时间" width="180"></el-table-column>
                        <el-table-column label="道闸点" width="180">
                            <template slot-scope="scope">
                            <div>{{AccessControlList[scope.row.door_no]}}</div>
                            </template>
                        </el-table-column>
                        <el-table-column prop="in_or_out" label="出入"></el-table-column>
                    </el-table>
                </el-card>
            </el-col>
            <el-col :span="8">
              <!-- 车辆信息 -->
                <el-card shadow="never">
                    <div slot="header">车辆信息</div>
                    <el-row>
                    <el-col :span="24" v-if="tableData[0]">
                        <div class="carInfoItem">
                            <span>人员姓名：</span>{{tableData[0].name ? tableData[0].name: '/'}}
                        </div>
                        <div class="carInfoItem">
                            <span>人员姓名：</span>{{tableData[0].car_category ? tableData[0].car_category: '/'}}
                        </div>
                        <div class="carInfoItem">
                            <span>车牌号：</span>{{tableData[0].car_no ? tableData[0].car_no: '/'}}
                        </div>
                        <div class="carInfoItem">
                            <span>人员身份：</span>
                            <div v-if="tableData[0].identity!=null">
                                <div v-for="(v, i) of identityList" :key="i">
                                    <div v-if="v.id == tableData[0].identity">{{v.name}}</div>
                                </div>
                            </div>
                            <div v-else>/</div>
                        </div>
                        <div class="carInfoItem">
                            <span>单位类型：</span>{{tableData[0].company_type_name?tableData[0].company_type_name:'/'}}
                        </div>
                        <div class="carInfoItem">
                            <span>单位名称：</span>{{tableData[0].company_name?tableData[0].company_name:'/'}}
                        </div>
                    </el-col>
                    </el-row>
                </el-card>
            </el-col>
        </el-row>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                isLoading: false,
                carCount: '',
                AccessControlList: {
                    "1": "1号门",
                    "2": "2号门",
                    "3": "3号门",
                    "4": "4号门"
                },
                identityList: [
                    {id: 0, name: '管理人员'},
                    {id: 1, name: '施工人员'}
                ],
                tableData: []
            }
        },
        created() {
            // this.isLoading = true;
            // let statistics = this.$http.get('api/v1/security/car_statistics').then((res) => {
            //     this.carCount = res.data;
            // }).catch(() => {})
            // let record = this.$http.get(`api/v1/security/car_record/?page=1&page_size=10`)
            // .then(({data}) => {
            //     this.tableData = data;
            // }).catch(() => {})
            // this.$http.requestAll([statistics, record]).then(() => {
            //     this.isLoading = false;
            // }).catch(() => {
            //     this.isLoading = false;
            // })
        },
        methods: {
            historyBtn() {
                this.$router.push({path: '/Security/VehicleBarrierHistoryList'})
            }
        }
    }
</script>
<style lang="scss" scoped>
    .today-wrap {
        margin-bottom: 20px;
    }
    .todayItem {
        display: flex;
        align-items: center;
        justify-content: center;
        i {
            font-size: 20px;
        }
        .todayItem_cont {
            padding-left: 10px;
            display: flex;
            flex-direction: column;
            align-items: center;
            div {
                color: rgba(0, 0, 0, 0.45);
                font-size: 14px;
                line-height: 22px;
            }
            span {
                font-size: 30px;
                line-height: 38px;
                white-space: nowrap;
                text-overflow: ellipsis;
                word-break: break-all;
            }
        }
    }
    .record-header {
        display: flex;
        justify-content: flex-end;
        margin-bottom: 12px;
    }
    .carInfoItem {
        padding-bottom: 8px;
        color: rgba(0, 0, 0, 0.65);
        display: flex;
        span {
            color: rgba(0, 0, 0, 0.85);
            font-weight: 400;
            font-size: 14px;
            line-height: 1.5715;
            text-align: start;
        }
    }
</style>
